<template>
  <van-search v-model="query" :placeholder="placeholder" background="#222" />
</template>
<script>
import { debounce } from 'throttle-debounce' // 节流
export default {
  name: 'SearchInput',
  props: {
    modelValue: String,
    placeholder: {
      type: String,
      default: '请输入搜索关键词'
    }
  },
  data() {
    return {
      query: this.modelValue
    }
  },
  methods: {
    onSearch() {},
    onCancel() {}
  },
  computed: {},

  created() {
    this.$watch(
      'query',
      debounce(500, newVal => {
        this.$emit('update:modelValue', newVal.trim())
      })
    )
    this.$watch('modelValue', newVal => {
      this.query = newVal
    })
  }
}
</script>
<style lang="scss" scoped></style>
